<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li{
            width: 600px;
            line-height: 10px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
    <script src="./jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            // $('#list li:eq(2)').css('border', '5px solid #f00');
            // $('#list li').eq(3).css('border', '5px solid #f00');
            // $('#list li').first().css('border', '5px solid #f00');

            console.log($('#list li').hasClass('item'));
            console.log($('#list li:eq(0)').hasClass('item'));

            console.log($('#list li').is('.item'));
            console.log($('#list .item').is('p'));

            // console.log($('#list li').text());
            console.log($('#list li').map(function (){
                // alert('OK');
                return $(this).text();
            }));

            // $('#list').css('border', '5px solid #f00');
            // $('#list').children().css('border', '5px solid #f00');
            // $('.item').parent().css('border', '5px solid #f00');
            

            // $('#list').add('#list p,h1').css('border', '5px solid #f00');

            // $('#list').children('li').andSelf().css('border', '5px solid #f00');
            

            $('#list').children('li').end().css('border', '5px solid #f00');

            
        });
    </script>
</head>
<body>
    <h1>jQuery 筛选</h1>
    <hr>

    
    <ul id="list">
        <p>悄悄的.不要声张</p>
        <li>小静静 和我 去钓鱼</li>
        <li></li>
        <li>
            小艳艳 和我 去看电影
            <ul>
                <li>小静静 和我 去钓鱼</li>
                <li>小哈哈 和我 去跳舞</li>
                <li>小艳艳 和我 去看电影</li>
                <p class="item">我不是小艳艳!</p>
                <li class="item">小艳艳1 和我 去看电影</li>
                <li>小艳艳2 和我 去看电影</li>
                <li>小艳艳3 和我 去看电影</li>
            </ul>
        </li>
        <li>小艳艳1 和我 去看电影</li>
        <li class="item">小艳艳2 和我 去看电影</li>
        <li>小艳艳3 和我 去看电影</li>
    </ul>

    <hr>
    <ul>
        <li>小静静 和我 去钓鱼</li>
        <li>小哈哈 和我 去跳舞</li>
        <li>
            小艳艳 和我 去看电影
            <ul>
                <li>小静静 和我 去钓鱼</li>
                <li>小哈哈 和我 去跳舞</li>
                <li>小艳艳 和我 去看电影</li>
                <p>我不是小艳艳!</p>
                <li>小艳艳1 和我 去看电影</li>
                <li>小艳艳2 和我 去看电影</li>
                <li>小艳艳3 和我 去看电影</li>
            </ul>
        </li>
        <li>小艳艳1 和我 去看电影</li>
        <li>小艳艳2 和我 去看电影</li>
        <li>
            小艳艳3 和我 去看电影
            <ul>
                <li>小静静 和我 去钓鱼</li>
                <li>小哈哈 和我 去跳舞</li>
                <li>小艳艳 和我 去看电影</li>
                <p>我不是小艳艳!</p>
                <li>小艳艳1 和我 去看电影</li>
                <li>小艳艳2 和我 去看电影</li>
                <li>小艳艳3 和我 去看电影</li>
            </ul>
        </li>
    </ul>

    <hr>
    <ul>
        <li>小静静 和我 去钓鱼</li>
        <li>小哈哈 和我 去跳舞</li>
        <li>小艳艳 和我 去看电影</li>
        <p>我不是小艳艳!</p>
        <li>小艳艳1 和我 去看电影</li>
        <li>小艳艳2 和我 去看电影</li>
        <li>小艳艳3 和我 去看电影</li>
    </ul>

</body>
</html>